"use strict";
$(document).ready(function(){
    
    /*
     * VARIABLES
     */
    var postResizeStyles = {
        "introduction-inner" : {
            "left": "50%",
            "top":"50%",
            "transform":"translate(-50%,-50%)",
            "-moz-transform":"translate(-50%,-50%)",
            "-webkit-transform":"translate(-50%,-50%)",
            "-o-transform":"translate(-50%,-50%)",
            "-ms-transform":"translate(-50%,-50%)",
        },
    };
    
    var employment = [
        {
            period:"2006-2009",
            job:"WEB DESIGNER",
            place:"Google Inc.",
            description:" Suspendisse nec felis ultricies, mollis mi et, varius lectus. Sed sollicitudin diam eleifend elementum consequat. In sit amet quam ornare, fermentum dui eget, lacinia quam. "
        },
        {
            period:"2009-2011",
            job:"FRONTEND DEVELOPER",
            place:"Creativemarket",
            description:"Integer sem neque, laoreet quis velit a, aliquet congue leo. Ut in consequat felis. In sagittis, purus nec dapibus ullamcorper, diam quam commodo mauris, in egestas velit purus id augue."
        },
        {
            period:"2011-2015",
            job:"WEB DESIGNER",
            place:"Google Inc.",
            description:"Vestibulum ultricies, velit sit amet volutpat sodales, enim ipsum aliquam mauris, vel mollis eros ante vitae metus. Fusce eleifend lorem quis libero imperdiet efficitur."
        },
    ];
    /*
     * INITIAL ACTIONS
     */
    
    resize();
    buildEmployment();
    
    /*
     * FUNCTIONS
     */
    
    function buildEmployment() {
        
        for( var i=0 ; i<employment.length ; ++i ) {
            
            var item = createDiv(null,"row timeline-content");
            
            var years = createDiv(null,"timeline-years");
            var YearsSide = ( !(i%2) ) ? ["blank","filled"] : ["filled","blank"] ;
            //var YearsContent = ( i%2 ) ? [null,employment[i]["period"]] : [employment[i]["period"],null] ;
            var YearsLeft = createDiv(null,"col-xs-6 left " + YearsSide[0]);
            var YearsRight = createDiv(null,"col-xs-6 right " + YearsSide[1]);
            var yearContent = createDiv(null,null,employment[i]["period"]);
            if( !(i%2) ) {
                YearsRight.append(yearContent);
            } else {
                YearsLeft.append(yearContent);
            }
            years.append(YearsLeft);
            years.append(YearsRight);
            item.append(years);
            
            var details = createDiv(null,"timeline-details");
            var detailsSide = ( !(i%2) ) ? ["filled",""] : ["","filled"] ;
            var detailsLeft = createDiv(null,"col-xs-6 left " + detailsSide[0]);
            var detailsRight = createDiv(null,"col-xs-6 right " + detailsSide[1]);
            var title = createDiv(null,"title");
            var job = createDiv(null,"job",employment[i]["job"]);
            var dash = createDiv(null,"dash","&nbsp;-&nbsp;");
            var company = createDiv(null,"company",employment[i]["place"]);
            title.append(job);
            title.append(dash);
            title.append(company);
            var description = createDiv(null,"description",employment[i]["description"]);
            if( i%2 ) {
                detailsRight.append(title);
                detailsRight.append(description);
            } else {
                detailsLeft.append(title);
                detailsLeft.append(description);
            }
            
            details.append(detailsLeft);
            details.append(detailsRight);
            
            item.append(details);
            
            $("#section-employment").append(item);
            
        }
        
    }
    
    function createDiv(id,classes,content) {
        var div = $(document.createElement("div"));
        if( typeof id !== "undefined" && id !== null ) {
            div.attr("id",id);
        }
        if( typeof classes !== "undefined" && classes !== null ) {
            div.attr("class",classes);
        }
        if( typeof content !== "undefined" && content !== null ) {
            div.html(content);
        }
        return div;
    }
    
    /*
     * EVENTS
     */
    
    $(window).resize(resize);
    
    function resize() {
        $(".section").css("height",window.innerHeight+"px");
        for( var i in postResizeStyles ) {
            for( var k in postResizeStyles[i] ) {
                $("#"+i).css(k,postResizeStyles[i][k]);
            }
        }
    }
    
    $("#introduction-arrow").click(function(){
        $("html, body").animate({ scrollTop: $("#section-about").offset().top}, '200');
    });
    
});